<template>
  <div class="result-list">
    <div class="result-float overflow">
      <el-popover
        v-for="(list, index_list) in data"
        :key="index_list"
        placement="right"
        width="400"
        trigger="click"
      >
        <tooltips :data="list"></tooltips>
        <div
          slot="reference"
          :class="['result-room-item pointer flex left', list.apartment.status==='RENTED' && 'RENTED', list.apartment.status==='VACANT' && 'VACANT']"
        >
          <div class="result-left">
            <h2 class="room-apart-title">
              <span>{{list.apartment.communityName}}</span>
            </h2>
            <p class="room-apart">
              <span>{{`${list.apartment.building}幢 ${list.apartment.unit}单元 ${list.apartment.floor}层`}}</span>
            </p>
            <p class="room-apart">
              <span>{{list.apartment.room}}</span>
            </p>
          </div>
          <p class="room-apart add-house text-right">
            <span
              v-if="list.apartment.status==='VACANT'"
              class="success pointer"
              @click="gotoHouseSource()"
            >增加子房源</span>
          </p>
          <span
            class="room-status"
          >{{list.apartment.status==='RENTED'?'已租':(list.apartment.status==='VACANT'?'虚拟':'空闲')}}</span>
        </div>
      </el-popover>
    </div>
    <el-pagination
      background
      class="text-right"
      layout="prev, pager, next"
      :total="page.total"
      :page-size.sync="page.page"
      @current-change="currentChange"
      @size-change="sizeChange"
    ></el-pagination>
  </div>
</template>

<script>
import tooltips from "./tooltips";
export default {
  name: "result-list",
  props: {
    data: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      page: {
        current: 1,
        total: 0,
        page: 10,
      },
    };
  },
  methods: {
    currentChange(page) {
      this.page.current = page;
    },
    sizeChange(size) {
      this.page.size = size;
    },
    gotoHouseSource() {
      this.$router.push({
        path: "/room/subhouse",
      });
    },
  },
  components: {
    tooltips,
  },
};
</script>

<style lang="scss" scoped>
.result-room-item {
  width: 200px;
  border: 1px solid rgba(220, 223, 230, 0.7);
  border-top: 10px solid #409eff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 7px 7px 4px 4px;
  overflow: hidden;
  font-size: 14px;
  cursor: pointer;
  flex-direction: column;
  margin: 0 10px 10px 0;
  position: relative;
  .room-apart-title {
    font-size: 14px;
    padding-bottom: 10px;
    margin: 0;
  }
  .room-apart {
    margin: 0px;
    padding-bottom: 10px;
  }
  .result-left {
    padding-right: 50px;
  }
  .room-status {
    display: block;
    width: 40px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    margin-left: 20px;
    color: #fff;
    font-size: 12px;
    border-radius: 6px 0 6px 0;
    background-color: #2889f8;
    position: absolute;
    right: 10px;
  }
  .add-house {
    height: 20px;
    line-height: 20px;
  }
}
.result-float {
  margin-bottom: 20px;
}
.RENTED {
  border-color: #04a568;
  .room-status {
    background: #04a568 !important;
  }
}
.VACANT {
  border-color: #e1e1e1;
  .room-status {
    background: #dfdfdf !important;
  }
}
</style>
